<template>
  <div class="login">
    <el-container>
<!--      <el-header>
        <div class="">
        </div>
      </el-header> -->
      <el-main>
          <div class="login_main" >
            <div class="login_bsk">
              <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
                <h3>
                  <span class="title">{{ webName }}</span>
                </h3>
                <el-form-item prop="username" class="elFromItemCss">
                  <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
                    <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
                  </el-input>
                </el-form-item>
                <el-form-item prop="password" class="elFromItemCss">
                  <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
                    <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
                  </el-input>
                </el-form-item>
                <!-- <el-form-item prop="code">
                  <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
                    <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
                  </el-input>
                  <div class="login-code">
                    <img :src="codeUrl" @click="getCode">
                  </div>
                </el-form-item> -->
                <!-- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住我</el-checkbox> -->
                <el-form-item style="width:100%;" class="elFromItemCss">
                  <el-button :loading="loading" size="medium" class="line-btn" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
                    <span v-if="!loading">登 录</span>
                    <span v-else>登 录 中...</span>
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
      </el-main>
<!--      <el-footer>
        <div v-if="$store.state.settings.showFooter" id="el-login-footer">
          <span v-html="$store.state.settings.footerTxt"/>
          <a href="" target="_blank">{{ $store.state.settings.caseNumber }}</a>
        </div>
      </el-footer> -->
    </el-container>
  </div>
</template>

<script>
import { encrypt } from '@/utils/rsaEncrypt'
import Config from '@/config'
import { getCodeImg } from '@/api/framework/login/login'
//import csgImg from '@/assets/logo/logo.png'
export default {
  name: 'Login',
  data() {
    return {
      webName: Config.webName,
      codeUrl: '',
      cookiePass: '',
      //csgImg: csgImg,
      clientId: Config.clientId,
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空' }],
        //code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    //this.getCode()
    this.getCookie()
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.codeUrl = 'data:image/gif;base64,' + res.img
        this.loginForm.uuid = res.uuid
      })
    },
    getCookie() {
      const username = localStorage.getItem('username')
      let password = localStorage.getItem('password')
      const rememberMe = localStorage.getItem('rememberMe')
      // 保存cookie里面的加密后的密码
      this.cookiePass = password === null ? '' : password
      password = password === null ? this.loginForm.password : password
      this.loginForm = {
        username: username === null ? this.loginForm.username : username,
        password: password,
        rememberMe: rememberMe === null ? false : Boolean(rememberMe),
        code: ''
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe,
          code: this.loginForm.code,
          uuid: this.loginForm.uuid,
          clientId: this.clientId,
        }
        if (user.password !== this.cookiePass) {
         // user.password = encrypt(user.password)
          user.password = user.password
        }
        if (valid) {
          this.loading = true
          if (user.rememberMe) {
            localStorage.setItem('username', user.username)
            localStorage.setItem('password', user.password)
            localStorage.setItem('rememberMe', user.rememberMe)
          } else {
            localStorage.removeItem('username')
            localStorage.removeItem('password')
            localStorage.removeItem('rememberMe')
          }
          this.$store.dispatch('Login', user).then(() => {
            this.loading = false
            this.$router.push({ path: '/' })
            //去之前的页面
            //this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
            this.getCode()
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .login-form {
    background: #ffffff;
    width: 375px;
    height: 365px;
    box-shadow:2px 10px 20px rgba(0, 0, 0, 0.4);
    padding: 25px 25px 5px 25px;
    border-radius: 15px;
    .el-input {
      height: 40px;
      //margin-bottom: 20px;
      input {
        height: 40px;
      }
    }
    .input-icon{
      height: 40px;width: 14px;margin-left: 2px;
    }
  }

</style>


<style rel="stylesheet/scss" lang="scss" scoped>
  .elFromItemCss{
    height: 66px;
  }

 .el-header{
    height: 70px !important;
 }
 .el-footer {
   height: 80px !important;
 }
  .el-main {
    padding:0px;
  }
.el-button--primary {
     color: #fff;
     background-color:#003C78;
     border-color: #003C78;
   }
   .el-button--primary:hover{
     color: #fff;
     background-color: #3363B6;
     border-color: #3363B6;
   }
  .banner {
    border-width:0px;
    position:absolute;
    left:0px;
    top:0px;
    width: 100%;
    height:60px;
    display:flex;
  }
  .banner_div {
    position:absolute;
    left:0px;
    top:0px;
    width: 100%;
    height:60px;
    background:inherit;
    background-color:rgba(255, 255, 255, 1);
    box-sizing:border-box;
    border-width:1px;
    border-color:rgba(224, 224, 224, 1);
  }
  .csgLog {
    border-width:0px;
    position:absolute;
    left:20px;
    top:14px;
    width:197px;
    height:32px;
    display:flex;
  }
  .login {
    display: flex;
    justify-content: center;
    height: 100%;
    background-position: center;
    background-repeat: repeat-x;
  }
  .login_main {
    // position: relative;
    // //align-content: center;//Chrome、Firefox、Safari和Edge
    // width: 100%;
    // background: url(../assets/logo/index.png) no-repeat 0px center;
    // height: 100%;
    // background-size: cover;
     -webkit-display:flex;
      display:flex;
      -webkit-align-items:center;
      align-items:center;
      -webkit-justify-content:center;
      justify-content:center;
      width: 100%;
      background: url(../assets/logo/index.png) no-repeat 0px center;
      height: 100%;
      background-size: cover;
  }
  .login_bsk {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  h3{
    //border-left: 4px solid rgba(0, 60, 120, 1);
    margin-bottom: 28px;
    text-align: center;
    font-size: 18px;
  }
  .title {
    color: #000000;
    font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
  }

  .login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
  }

  .line-btn{
  	  width: 100%;
  	  border-radius: 5px;
      height: 40px;
  }
  // .login-code {
  //   width: 33%;
  //   display: inline-block;
  //   height: 38px;
  //   float: right;
  //   img{
  //     margin-top: -2px;
  //     border-radius: 3px;
  //     cursor: pointer;
  //     vertical-align:middle
  //   }
  // }
</style>
